<template>
  <div>
    <!-- 发布房源 -->
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.go(-1)" />
    <div class="information">
      <div class="information-header">房源信息</div>

      <van-field center clearable label="小区名称">
        <template #button>
          <van-button type="primary" block to="index" color="#fff"
            >请输入小区名称
            <van-icon name="arrow" />
          </van-button>
        </template>
      </van-field>

      <!-- 租       金 -->
      <van-field
        v-model="rent"
        type="number"
        label="租 金"
        placeholder="请输入租金/月"
      >
        <template #button>
          <van-button>￥/月</van-button>
        </template>
      </van-field>

      <!-- 建筑面积 -->
      <van-field
        v-model="rent"
        type="number"
        label="建筑面积"
        placeholder="请输入建筑面积"
      >
        <template #button>
          <van-button>㎡</van-button>
        </template>
      </van-field>

      <!-- 户型 -->
      <div class="houseType">
        <van-field
          readonly
          clickable
          name="picker"
          :value="usertype"
          label="户型"
          right-icon="arrow"
          placeholder="请选择"
          input-align="right"
          @click="house = true"
        />
        <!-- 点击确认按钮触发 confirm 事件，点击取消按钮触发 cancel 事件 -->
        <van-popup v-model="house" position="bottom">
          <van-picker
            show-toolbar
            :columns="houseType"
            @confirm="onConfirm"
            @cancel="house = false"
          />
        </van-popup>
      </div>

      <!-- 所在楼层 -->
      <div class="floor">
        <van-field
          readonly
          clickable
          name="picker"
          :value="userfloor"
          label="所在楼层"
          right-icon="arrow"
          placeholder="请选择"
          input-align="right"
          @click="selected = true"
        />
        <van-popup v-model="selected" position="bottom">
          <van-picker
            show-toolbar
            :columns="floorType"
            @confirm="floor"
            @cancel="selected = false"
          />
        </van-popup>
      </div>

      <!-- 朝       向 -->
      <div class="orienTation">
        <van-field
          readonly
          clickable
          name="picker"
          :value="usertoward"
          label="朝向"
          right-icon="arrow"
          placeholder="请选择"
          input-align="right"
          @click="orient = true"
        />
        <van-popup v-model="orient" position="bottom">
          <van-picker
            show-toolbar
            :columns="towardType"
            @confirm="toward"
            @cancel="orient = false"
          />
        </van-popup>
      </div>

      <!-- 房屋标题 -->
      <div class="houseTitle">
        <div class="information-title">房屋标题</div>
        <van-field
          v-model="text"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
      </div>

      <!-- 房屋图像 -->
      <div class="houseImage">
        <div class="information-title">房屋图像</div>
        <van-uploader v-model="fileList" multiple />
      </div>
      <!-- 房屋配置 -->
      <div class="housingConfiguration">
        <div class="information-title">房屋配置</div>
        <van-grid :column-num="5">
          <van-grid-item icon="photo-o" text="衣柜" />
          <van-grid-item icon="photo-o" text="洗衣机" />
          <van-grid-item icon="photo-o" text="空调" />
          <van-grid-item icon="fire-o" text="天然气" />
          <van-grid-item icon="photo-o" text="冰箱" />
          <van-grid-item icon="photo-o" text="暖气" />
          <van-grid-item icon="photo-o" text="电视" />
          <van-grid-item icon="photo-o" text="热水器" />
          <van-grid-item icon="photo-o" text="宽带" />
          <van-grid-item icon="photo-o" text="沙发" />
        </van-grid>
      </div>
      <!-- 房屋描述 -->
      <div class="houseDescription">
        <div class="information-title">房屋描述</div>
        <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入房屋描述信息"
        />
      </div>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item badge="" @click="gb">
        <span>取消</span>
      </van-tabbar-item>
      <van-tabbar-item @click="release">提交</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { releaseListings } from '@/api/lookfor'

export default {
  name: 'PublishListings',
  props: {},
  // 局部注册
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data () {
    return {
      rent: '',
      usertype: '', // 户型
      houseType: ['一室', '二室', '三室', '四室', '四室+'], // 户型
      house: false, // 户型
      userfloor: '', // 所在楼层
      floorType: ['高楼层', '中楼层', '低楼层'], // 所在楼层
      selected: false, // 所在楼层
      usertoward: '', // 朝向
      towardType: ['东', '南', '西', '北', '东南', '东北', '西南', '西北'], // 朝向
      orient: false, // 朝向
      text: '', // 房屋标题
      // 房屋图像
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { ur,l: 'https://cloud-image', isImage: true }
      ],
      message: '',
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png'
      },
      body: {}
    }
  },
  // 提交
  async release (body) {
    await releaseListings(body)
  },
  methods: {
    // 户型
    onConfirm (usertype) {
      this.usertype = usertype
      this.house = false
    },
    // 所在楼层
    floor (userfloor) {
      this.userfloor = userfloor
      this.selected = false
    },
    // 朝向
    toward (usertoward) {
      this.usertoward = usertoward
      this.orient = false
    },
    gb () {
      Dialog.alert({
        title: '提示',
        message: '放弃发布房源?',
        theme: 'round-button'
      })
        .then(() => {
          this.$router.push('/homePage')
          // on confirm
        })
        .catch(() => {
          this.$router.push('/publishListings')
          // on cancel
        })
    }
  },
  mounted () {}
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #1cb676;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
::v-deep .van-button--normal {
  padding: 0;
}
::v-deep .van-button--default {
  border: 0;
}
::v-deep .van-cell {
  display: flex;
  align-items: center;
  height: 50px;
}
.information {
  padding-bottom: 70px;
  background-color: #f5f5f9;
  .information-header {
    color: #21b97a;
    background-color: #fff;
    font-size: 15px;
    padding: 15px 15px 9px;
    border-bottom: 1px solid #ebedf0;
  }
  .template {
    font-size: 14px;
    margin-right: 5px;
  }
  .van-cell {
    // ::v-deep van-cell__value {
    //   height: 15px;
    // }
    ::v-deep .van-button .van-button__text {
      color: #888;
    }
  }
  .information-title {
    color: #333;
    background-color: #fff;
    font-size: 14px;
    padding: 15px 15px 9px;
    border-bottom: 1px solid #ebedf0;
  }
  .van-uploader {
    margin: 9px 8px 0;
  }
  .houseImage {
    background-color: #fff;
  }
  ::v-deep .houseDescription {
    margin-top: 20px;
    background-color: #fff;
    height: 190px;
  }
}
</style>
